<template>
  <div class="userLikeItem" @click="toArticle" v-if="like">
    <div class="top">
      <div class="author">
        <div class="left">
          <div
            class="avatar"
            @click.stop="toUser"
            v-if="
              (like.resource.author.userinfo.is_realname_auth ||
                like.resource.author.userinfo.sex != 2) &&
              !like.resource.author.userinfo.is_vmovier_migrate_user
            "
          >
            <van-image
              round
              lazy-load
              width="30px"
              height="30px"
              :src="like.resource.author.userinfo.avatar"
            />
          </div>
          <div class="username">
            {{ like.resource.author.userinfo.username }}
          </div>
          <div class="team" v-if="like.resource.team_user_count != 0">
            等
            <strong>{{ like.resource.team_user_count }}</strong>
            位创作人
          </div>
        </div>
        <div
          class="right"
          v-if="
            (like.resource.author.userinfo.is_realname_auth ||
              like.resource.author.userinfo.sex != 2) &&
            !like.resource.author.userinfo.is_vmovier_migrate_user
          "
        >
          <div v-if="!isFollow" class="follow" @click.stop="follow">
            +&nbsp;关注
          </div>
          <div v-else class="unfollow" @click.stop="unfollow">已关注</div>
          <div class="more" @click.stop="share">
            <svg
              t="1677136516616"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4040"
              width="16"
              height="16"
            >
              <path
                d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
                p-id="4041"
                fill="#999999"
              ></path>
            </svg>
          </div>
        </div>
        <div class="right" v-else>
          <div class="more" @click.stop="share">
            <svg
              t="1677136516616"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4040"
              width="16"
              height="16"
            >
              <path
                d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
                p-id="4041"
                fill="#999999"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="title">{{ like.resource.title }}</div>
    </div>
    <div class="img">
      <van-image
        lazy-load
        width="360px"
        height="auto"
        :src="like.resource.cover"
      />
      <div class="countBox">
        <div class="view">
          {{ like.resource.count.count_view | formatter }}&nbsp;观看
        </div>
        <div class="line"></div>
        <div class="duration">{{ like.resource.duration | time }}</div>
      </div>
    </div>
    <div class="functions">
      <div class="function" @click.stop="collect">
        <svg
          t="1677204249032"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5593"
          width="16"
          height="16"
        >
          <path
            d="M769.097 935.636c-4.457 0-8.93-1.063-13.026-3.216L512 804.104 267.93 932.42a28 28 0 0 1-40.627-29.518l46.614-271.776L76.46 438.653a27.999 27.999 0 0 1 15.519-47.76l272.878-39.651 122.035-247.27a27.998 27.998 0 0 1 50.216 0l122.035 247.27 272.878 39.651a28.002 28.002 0 0 1 15.518 47.76L750.083 631.126l46.613 271.776a28 28 0 0 1-27.599 32.734zM512 744.47c4.476 0 8.951 1.072 13.029 3.216l206.883 108.766-39.511-230.367a27.995 27.995 0 0 1 8.053-24.784l167.37-163.146-231.301-33.61a27.998 27.998 0 0 1-21.082-15.317L512 179.632 408.559 389.227a28 28 0 0 1-21.082 15.317l-231.301 33.61L323.547 601.3a28.004 28.004 0 0 1 8.053 24.784l-39.511 230.367L498.97 747.686A27.99 27.99 0 0 1 512 744.47z"
            p-id="5594"
            fill="#000000"
          ></path>
        </svg>
        <div class="num">
          {{ like.resource.count.count_collect | formatter }}
        </div>
      </div>
      <div class="function" @click.stop="comment">
        <svg
          t="1677343044376"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6378"
          width="16"
          height="16"
        >
          <path
            d="M386.4576 450.6624m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
            p-id="6379"
            fill="#000000"
          ></path>
          <path
            d="M512 450.6624m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
            p-id="6380"
            fill="#000000"
          ></path>
          <path
            d="M637.5424 450.6624m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
            p-id="6381"
            fill="#000000"
          ></path>
          <path
            d="M752.64 184.32H271.36c-47.9744 0-87.04 39.7824-87.04 88.6784v357.4784c0 48.896 39.0656 88.6784 87.04 88.6784h332.6976c0.9216 0 1.8432 0.3072 2.6112 0.8704l159.0272 111.36a45.5424 45.5424 0 0 0 47.2064 3.1744c15.4112-7.9872 25.0368-23.808 25.088-41.3696L839.68 273.1008v-0.1024c0-48.896-39.0656-88.6784-87.04-88.6784z m34.2016 599.3472l-150.784-105.6256a55.61344 55.61344 0 0 0-32-10.1376H271.36c-19.7632 0-35.84-16.7936-35.84-37.4784V272.9984c0-20.6848 16.0768-37.4784 35.84-37.4784h481.28c19.7632 0 35.84 16.7936 35.84 37.4272l-1.6384 510.72z"
            p-id="6382"
            fill="#000000"
          ></path>
        </svg>
        <div class="num">
          {{ like.resource.count.count_comment | formatter }}
        </div>
      </div>
      <div class="function" @click.stop="doLike">
        <svg
          v-if="!isLike"
          t="1677204147051"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3623"
          width="16"
          height="16"
        >
          <path
            d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
            fill="#000000"
            p-id="3624"
          ></path>
        </svg>
        <svg
          v-else
          t="1677204147051"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3623"
          width="16"
          height="16"
        >
          <path
            d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
            fill="#ff0000"
            p-id="3624"
          ></path>
        </svg>
        <div class="num" :class="{ like: isLike }">
          {{ likeNum | formatter }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  props: ["like"],
  data() {
    return {
      isFollow: false,
      isLike: false,
      likeNum: 0,
    };
  },
  mounted() {
    this.likeNum = this.like.resource.count.count_like;

    if (localStorage.getItem("nsMine")) {
      let likes = JSON.parse(localStorage.getItem("nsLikes") || "[]");
      // console.log(follows.indexOf(this.article.author.userinfo.id));
      if (likes.indexOf(this.like.resource.id) != -1) {
        this.isLike = true;
        this.likeNum++;
      } else {
        this.isLike = false;
      }

      let follows = JSON.parse(localStorage.getItem("follows") || "[]");
      // console.log(this.like.resource.author.userinfo.id);
      if (follows.indexOf(this.like.resource.author.userinfo.id) != -1) {
        this.isFollow = true;
      } else {
        this.isFollow = false;
      }
    }
  },
  filters: {
    formatter: function (value) {
      if (value >= 1000 && value < 10000) {
        value = (value / 1000).toFixed(1) + "k";
      }
      if (value >= 10000 && value < 10000000) {
        value = (value / 10000).toFixed(1) + "w";
      }
      return value;
    },
    time: function (text) {
      let minute =
        Math.floor(text / 60) < 10
          ? `0${Math.floor(text / 60)}`
          : Math.floor(text / 60);
      let second = text % 60 < 10 ? `0${text % 60}` : text % 60;
      return `${minute}'${second}''`;
    },
  },
  methods: {
    toArticle() {
      // console.log("toArticle");
      this.$router.push({
        path: "/article",
        query: { id: this.like.resource.id },
      });
    },
    toUser() {
      // console.log("toUser");
      this.$router.push({
        path: "/user",
        query: { userid: this.like.resource.author.userinfo.id },
      });
    },
    follow() {
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        // console.log(id);
        let follows = JSON.parse(localStorage.getItem("follows") || "[]");
        follows.unshift(this.like.resource.author.userinfo.id);
        localStorage.setItem("follows", JSON.stringify(follows));
        this.isFollow = true;
        this.$toast("关注成功");
      }
    },
    unfollow() {
      this.$dialog
        .confirm({
          message: "确定要取消关注TA吗？",
        })
        .then(() => {
          // on confirm
          // console.log(id);
          let follows = JSON.parse(
            localStorage.getItem("follows") || "[]"
          ).filter((o) => o != this.like.resource.author.userinfo.id);
          localStorage.setItem("follows", JSON.stringify(follows));
          this.isFollow = false;
          this.$toast("取消关注成功");
        })
        .catch(() => {
          // on cancel
        });
    },
    ...mapMutations(["changeShare"]),
    share() {
      // console.log("share");
      this.changeShare();
    },
    collect() {
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        console.log("collect");
      }
    },
    comment() {
      // console.log("comment");
      this.$router.push({
        path: "/article",
        query: { id: this.like.resource.id, value: 1 },
      });
    },
    doLike() {
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        // console.log("doLike");
        let likes = JSON.parse(localStorage.getItem("nsLikes") || "[]");
        if (!this.isLike) {
          this.likeNum++;
          likes.unshift(this.like.resource.id);
        } else {
          this.likeNum--;
          likes = likes.filter((o) => o != this.like.resource.id);
        }
        localStorage.setItem("nsLikes", JSON.stringify(likes));

        this.isLike = !this.isLike;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.userLikeItem {
  // margin: 0 15px;
  margin-bottom: 10px;
  padding-top: 10px;
  background-color: white;
  border-radius: 5px;

  .top {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;

    .author {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;

      .left {
        display: flex;
        align-items: center;

        .avatar {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 1px solid #f2f2f2;
          margin-right: 5px;
        }

        .username {
          font-size: 13px;
          margin-right: 5px;
        }

        .team {
          font-size: 13px;
        }
      }

      .right {
        display: flex;
        align-items: center;

        .follow {
          color: red;
          margin-right: 10px;
          font-size: 12px;
          font-weight: bold;
        }

        .unfollow {
          color: #999;
          margin-right: 10px;
          font-size: 12px;
          font-weight: bold;
        }

        .more {
          height: 16px;
        }
      }
    }

    .title {
      font-size: 15px;
      font-weight: bold;
    }
  }

  .img {
    position: relative;

    :deep(.van-image) {
      display: block !important;
    }

    .countBox {
      position: absolute;
      right: 15px;
      bottom: 10px;
      display: flex;
      align-items: center;
      font-size: 13px;
      color: white;

      > div {
        height: 18px;
        line-height: 18px;
      }

      .line {
        width: 1px;
        height: 12px;
        line-height: 12px;
        background-color: white;
        margin: 0 5px;
      }
    }
  }

  .functions {
    display: flex;
    justify-content: space-between;

    .function {
      width: 33%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;

      .num {
        margin-left: 4px;
      }

      .like {
        color: red;
      }
    }
  }
}
</style>
